import React, {PureComponent} from 'react';
import {List, InputItem, Switch, Stepper, Range, Button, Picker, Toast} from 'antd-mobile';
import HeadNavBar from 'Components/HeadNavBar';
import {createForm} from 'rc-form';
import {Control} from 'react-keeper';
import './index.less';
import Utils from 'Utils';

const Item = List.Item;

class AddAddress extends PureComponent {
  bindLeftClick = () => {
    Control.go(-1);
  };

  state = {
    value: 1,
  };

  onSubmit = (e) => {
    const {form} = this.props;
    e.preventDefault();
    form.validateFields((error, values) => {
      if (!error) {
        console.log('ok', values);
      } else {
        let errStr = '';
        Object.keys(error).map(key => errStr += form.getFieldError(key).join(' ') + ' ');
        Toast.fail(errStr, 2, () => {
        }, true);
      }
    });
  };

  bindPhoneChick = (rule, value = '', callback) => {
    if (value === '') {
      callback('手机号不能为空');
    }
    const re = /^1\d{10}$/;
    if (!re.test(value.replace(/\s/g, ''))) {
      callback('手机格式错误');
    }
    callback();
  };

  render() {
    const {getFieldProps, getFieldError} = this.props.form;

    return (
      <div>
        <HeadNavBar
          title='新增地址'
          mode='light'
          icon='&#xe61a;'
          bindLeftClick={this.bindLeftClick}
        />
        <div style={{height: 53}}/>
        <form>
          <List>
            <InputItem
              {...getFieldProps('addressee', {
                rules: [
                  {required: true, message: '收件人不能为空'}
                ],
              })}
              clear
              placeholder="姓名"
            >
              收件人
            </InputItem>
            <InputItem
              {...getFieldProps('phone', {
                rules: [
                  {validator: this.bindPhoneChick}
                ],
              })}
              type="phone"
              clear
              placeholder="手机号码"
            >
              联系方式
            </InputItem>
            <div className='address-picker'>
              <Picker
                data={Utils.getDistrictData()}
                title="区域选择"
                {...getFieldProps('district', {
                  rules: [
                    {required: true, message: '区域选择不能为空'}
                  ],
                })}
                onOk={e => console.log('ok', e)}
              >
                <List.Item arrow="horizontal">区域选择</List.Item>
              </Picker>
            </div>
            <InputItem
              {...getFieldProps('address', {
                rules: [
                  {required: true, message: '详细地址不能为空'}
                ],
              })}
              clear
              placeholder="街道门牌信息"
            >
              详细地址
            </InputItem>
            <Item>
              <Button type="primary" onClick={this.onSubmit}>保存</Button>
            </Item>
          </List>
        </form>
      </div>
    )
      ;
  }
}

const Index = createForm()(AddAddress);
export default Index;